<template>
	<div class="page-wrap" data-title="订单列表页面">
		<el-dialog title="订单评价回复" width="800px" custom-class="modal-custom-comment" :close-on-click-modal="false"
			:visible.sync="show_modal" :before-close="on_before_close" :closed="onclosed">
			<div class="modal-inner"></div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="show_modal = false">取 消</el-button>
				<el-button type="primary" @click="form_submit()">确 定</el-button>
			</span>
		</el-dialog>

		<div class="page-inner">
			<div class="section">
				<div class="sec-title">订单筛选</div>
				<div class="sec-ctx">
					<div class="filter-box">
						<div class="filter-item">
							<div class="filter-title">订单编号</div>
							<div class="filter-val">
								<el-input v-model="keyword" clearable placeholder="请输入"> </el-input>
							</div>
						</div>
						<div class="filter-item">
							<div class="filter-title">下单时间</div>
							<div class="filter-val">
								<el-date-picker v-model="keyword" type="daterange" align="right" unlink-panels
									range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
									value-format="yyyy-MM-dd" :picker-options="pickerOptions">
								</el-date-picker>
							</div>
						</div>
						<div class="filter-item">
							<div class="filter-title">收货人姓名</div>
							<div class="filter-val">
								<el-input v-model="keyword" clearable placeholder="请输入"> </el-input>
							</div>
						</div>
						<div class="filter-item">
							<div class="filter-title">收货人手机号</div>
							<div class="filter-val">
								<el-input v-model="keyword" clearable placeholder="请输入"> </el-input>
							</div>
						</div>
						<div class="btn-box">
							<el-button type="primary" @click="setView()"> 搜索 </el-button>
							<el-button type="default" @click="resetSearch()"> 重置 </el-button>
						</div>
					</div>
				</div>
			</div>

			<div class="section">
				<div class="sec-title">订单列表</div>

				<div class="sec-ctx">
					<!-- <div class="tab-wrap">
            <el-tabs v-model="activeName" @tab-click="tabClick">
              <el-tab-pane
                v-for="(item, index) in tabList"
                :key="index"
                :label="item.title"
                :name="item.name"
              >
              </el-tab-pane>
            </el-tabs>
          </div> -->

					<div class="order-list">
						<div class="order-title-box">
							<div class="sub">
								<div class="text">订单信息</div>
							</div>
							<div class="sub">评价星级</div>
							<div class="sub">评价内容</div>
							<div class="sub">用户昵称</div>
							<!-- <div class="sub">状态</div> -->
							<!-- <div class="sub">回复</div> -->
							<div class="sub">评价时间</div>
							<div class="sub">操作</div>
						</div>

						<div class="order-item" v-for="(item, index) in dataList" :key="index">
							<div class="item-top">
								<div class="t-left">
									<span>ID：{{ item.id }}</span>
									<span class="divider"></span>
									<span>时间：{{ item.createdTime }}</span>
								</div>
								<div class="t-right"></div>
							</div>
							<div class="item-bottom">
								<div class="sub">
									<div class="product-box">
										<!-- 
                      v-for="(sub, sub_index) in 2"
                      :key="sub_index"
                     -->
										<div class="product-item">
											<div class="img-box">
												<el-image style="width: 50px; height: 50px" :src="item.productImage"
													:preview-src-list="item.imgsUrl">
												</el-image>
											</div>
											<div class="title-box">
												<div class="title">{{ item.productName }}</div>
												<div class="guige">{{ item.productKeyVals }}</div>
											</div>
										</div>
									</div>
								</div>

								<div class="sub">{{ item.star }}</div>
								<div class="sub">{{ item.content }}</div>
								<div class="sub">{{ item.nickname }}</div>
								<!-- <div class="sub">状态</div> -->
								<!-- <div class="sub">回复</div> -->
								<div class="sub">{{ item.createdTime }}</div>
								<div class="sub">
									<el-button type="text" @click="doDetail(item)"> 详情 </el-button>
									<el-button type="text" @click="doReply(item)"> 回复 </el-button>
									<el-button type="text" @click="doDelete(item)"> 删除 </el-button>
								</div>
							</div>
						</div>
					</div>

					<div class="pagi-box">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="pagination.pageNums" :page-sizes="[10, 20, 50, 100, 200]"
							:page-size="pagination.pageSize" layout="total, sizes, prev, slot, next, jumper"
							:total="total" :pager-count="5">
							<span class="cus-current-page">
								<span> {{ pagination.pageNum }}/{{ totalPage }} </span>
							</span>
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";
export default {
	name: "news",
	components: {},

	data() {
		return {
			show_modal: false,
			dataList: [],
			tabSelect: {
				value: '',
				title: "全部",
				name: "全部"
			},
			pagination: {
				page: 1,
				pageSize: 10,
			},
			total: 0,
			keyword: "",
			//
			activeName: "全部",



			pickerOptions: {
				shortcuts: [{
					text: "最近一周",
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit("pick", [start, end]);
					},
				},
				{
					text: "最近一个月",
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit("pick", [start, end]);
					},
				},
				{
					text: "最近三个月",
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit("pick", [start, end]);
					},
				},
				],
			},
		};
	},
	computed: {
		tabList() {
			return [{
				title: "全部",
				name: "全部"
			},
			{
				title: "待付款",
				name: "待付款"
			},
			{
				title: "待发货",
				name: "待发货"
			},
			{
				title: "待收货",
				name: "待收货"
			},
			{
				title: "已完成",
				name: "已完成"
			},
			];
		},
	},
	watch: {},
	created() {
		this.setView();
	},
	mounted() { },
	methods: {
		setView() {
			this.query_review()
		},
		query_review() {
			this.$api({
				url: '/admin_service.php',
				method: "get",
				data: {
					action: "orders_commentList",
					...this.pagination,
					// orderStatus: this.tabSelect.value, //状态（为空则全部） ：-5-待支付 -1-已取消 0-待成团 1-待审核 2-待发货 3-待收货 4-待自提 5-已完成
					keyword: '',
					startTime: "",
					endTime: "",
				},
			}).then((res) => {
				// console.warn("新闻详情", res);
				let {
					code,
					data,
					msg
				} = res
				if (res.code == 200) {
					let {
						list,
						count
					} = data;
					// list.forEach((v) => {
					// 	let shouhuoJson = v.shouhuoJson || {};
					// 	let cus_name = ''
					// 	if (SHOP_TYPE == 'foreign') { //海外商城
					// 		cus_name = shouhuoJson.firstName + ' ' + shouhuoJson.lastName
					// 	} else {
					// 		cus_name = shouhuoJson.name
					// 	}
					// 	v.cus_name = cus_name
					// });
					this.dataList = list;
					this.total = count;
				}
			});
		},

		resetSearch() { },

		tabClick() { },

		// 分页
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);

			this.pagination.pageSize = val;
			this.setView();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);

			this.pagination.pageNum = val;

			this.setView();
		},
		//分页

		doDetail(item) { },
		doReply(item) { },
		doDelete(item) {
			this.$confirm("确定删除该内容？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					let id = item.id;
					this.$api({
						url: `/app/mall/order/goods/comment/${id}`,
						method: "delete",
					}).then((res) => {
						if (res.code == 200) {
							this.setView();
							this.$message({
								message: res.msg,
								type: 'success'
							})
						} else {
							alertErr(res.msg)
						}
					});
				})
				.catch(() => {
					alertInfo("已取消删除");
				});
		},


		on_before_close() {
			this.show_modal = false;
		},
		onclosed() {

		}
	},
};
</script>

<style scoped lang="less">
.page-wrap {
	.page-inner {}
}

.section {
	margin-bottom: 10px;
	background: #fff;
	padding: 20px;
	border-radius: 6px;
}

.sec-title {
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: bold;
}

.sec-ctx {}

.filter-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	.btn-box {
		margin-bottom: 15px;
	}

	.filter-item {
		margin-bottom: 15px;
		display: flex;
		align-items: center;
		margin-right: 30px;

		.filter-title {
			margin-right: 15px;
		}

		.filter-val {}
	}
}

// 商品信息
.order-list {
	.order-title-box {
		margin-bottom: 20px;
		display: flex;
		color: #44434b;
		padding: 12px 0;
		padding-top: 17px;
		height: 46px;
		background: rgba(208, 214, 228, 0.2);
		font-weight: 700;

		.sub {
			flex: 1;
		}

		.sub:nth-child(1) {
			flex: 3;

			.text {
				padding-left: 20px;
			}
		}

		.sub:nth-child(2) {}

		.sub:nth-child(3) {}

		.sub:nth-child(4) {}

		.sub:nth-child(5) {}

		.sub:nth-child(6) {}

		.sub:nth-child(7) {}

		.sub:nth-child(8) {}
	}

	.order-item {
		margin-bottom: 20px;
		border: 1px solid #d0d6e4;
		border-radius: 10px;

		.item-top {
			display: flex;
			color: #44434b;
			padding: 12px 20px;
			padding-top: 17px;
			height: 46px;
			background: rgba(208, 214, 228, 0.2);
			font-weight: 700;

			.t-left {
				.flex();

				.divider {
					width: 1px;
					height: 14px;
					background: #ccc;
					margin: 0 15px;
				}
			}

			.t-right {
				margin-left: 30px;
			}
		}

		.item-bottom {
			display: flex;
			align-items: center;

			.sub {
				flex: 1;
			}

			.sub:nth-child(1) {
				flex: 3;
			}

			.sub:nth-child(2) {}

			.sub:nth-child(3) {}

			.sub:nth-child(4) {}

			.sub:nth-child(5) {}

			.sub:nth-child(6) {}

			.sub:nth-child(7) {}

			.sub:nth-child(8) {}
		}

		.product-box {
			padding-left: 15px;

			.product-item {
				position: relative;
				display: flex;
				align-items: center;
				padding: 10px;

				&+.product-item {
					&::before {
						position: absolute;
						top: 0;
						content: "";
						width: calc(100% - 70px);
						height: 1px;
						background: #ddd;
					}
				}

				.img-box {
					flex: 1;
				}

				.title-box {
					flex: 2;

					.title {
						margin-bottom: 10px;
						color: #655eff;
						cursor: pointer;
					}

					.guige {}
				}

				.shuliang-box {
					flex: 1;

					.price {
						margin-bottom: 15px;
					}

					.num {}
				}
			}
		}
	}
}

.pagi-box {
	margin-top: 20px;
	text-align: right;
}
</style>